<template>
    <div class="attendance-management">
        <div class="header">
            <div class="header-left">
                <router-link to="/main/renshi/kaoqing" class="back-btn">
                    <i class="el-icon-arrow-left"></i> 返回
                </router-link>
                <div class="save-info">
                    <el-button type="primary" icon="el-icon-check" @click="saveRecord">保存</el-button>
                    <el-button type="info" icon="el-icon-printer" @click="printForm">打印</el-button>
                </div>
            </div>
            <h1 class="title">深圳市艾美思普科技有限公司<br>考勤管理办法</h1>
            <div class="meta">
                <div @dblclick="editMeta = true">
                    <p v-if="!editMeta">文件编号：{{ meta.fileNumber }}</p>
                    <input v-else v-model="meta.fileNumber" style="width: 100px;" @blur="editMeta = false" />
                </div>
                <div @dblclick="editMeta = true">
                    <p v-if="!editMeta">文件版本：{{ meta.version }}</p>
                    <input v-else v-model="meta.version" style="width: 100px;" @blur="editMeta = false" />
                </div>
                <div @dblclick="editMeta = true">
                    <p v-if="!editMeta">编制部门：{{ meta.department }}</p>
                    <input v-else v-model="meta.department" style="width: 100px;" @blur="editMeta = false" />
                </div>
                <div @dblclick="editMeta = true">
                    <p v-if="!editMeta">生效日期：{{ meta.effectiveDate }}</p>
                    <input v-else v-model="meta.effectiveDate" style="width: 100px;" @blur="editMeta = false" />
                </div>
            </div>
            <div>
                <div style="display: flex;justify-content: space-around; margin-bottom: 20px;line-height: 30px;">
                    <div @dblclick="editApproval = true">
                        <label v-if="!editApproval"><span>批准：{{ approvalPerson }}</span>
                            <span>日期：{{ approvalDate.year }}年{{ approvalDate.month }}月{{ approvalDate.day
                            }}日</span></label>
                        <label v-else>
                            <span>批准：<input type="text" v-model="approvalPerson" style="width: 100px;"
                                    @blur="editApproval = false" /></span>
                            <span>日期：<input type="text" v-model="approvalDate.year" style="width: 40px;">年
                                <input type="text" v-model="approvalDate.month" style="width: 40px;">月
                                <input type="text" v-model="approvalDate.day" style="width: 40px;">日</span>
                        </label>
                    </div>
                    <div @dblclick="editReview = true">
                        <label v-if="!editReview"><span>审核：{{ reviewer }}</span>
                            <span>日期：{{ reviewDate.year }}年{{ reviewDate.month }}月{{ reviewDate.day }}日</span></label>
                        <label v-else>
                            <span>审核：<input type="text" v-model="reviewer" style="width: 100px;"
                                    @blur="editReview = false" /></span>
                            <span>日期：<input type="text" v-model="reviewDate.year" style="width: 40px;">年
                                <input type="text" v-model="reviewDate.month" style="width: 40px;">月
                                <input type="text" v-model="reviewDate.day" style="width: 40px;">日</span>
                        </label>
                    </div>
                    <div @dblclick="editCompilation = true">
                        <label v-if="!editCompilation"><span>编制：{{ compilationPerson }}</span>
                            <span>日期：{{ compilationDate.year }}年{{ compilationDate.month }}月{{ compilationDate.day
                            }}日</span></label>
                        <label v-else>
                            <span>编制：<input type="text" v-model="compilationPerson" style="width: 100px;"
                                    @blur="editCompilation = false" /></span>
                            <span>日期：<input type="text" v-model="compilationDate.year" style="width: 40px;">年
                                <input type="text" v-model="compilationDate.month" style="width: 40px;">月
                                <input type="text" v-model="compilationDate.day" style="width: 40px;">日</span>
                        </label>
                    </div>
                </div>
                <!-- 分发部门编号部分 -->
                <div>
                    <label>分发部门编号</label><br>
                    <div v-for="(group, groupIndex) in distributionGroups" :key="groupIndex">
                        <div
                            style="display: grid;grid-template-columns: repeat(4,1fr); gap: 10px; text-align: left; align-items: center;width: 600px;margin: 10px auto;">
                            <div style="white-space: nowrap; display: flex;" v-for="(item, itemIndex) in group"
                                :key="itemIndex">
                                &emsp;<input type="checkbox" v-model="selectedDepartments[item.value]">
                                <span @dblclick="isEditingDepartment = true" v-if="!isEditingDepartment">{{ item.label
                                    }}</span>
                                <input v-else type="text" v-model="item.label" @blur="isEditingDepartment = false" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 修订记录部分 -->
            <button class="add-record-btn" @click="addRevisionRecord">新增修订记录</button>
            <table>
                <caption>修订记录</caption>
                <thead>
                    <tr>
                        <th>版本</th>
                        <th>生效日期</th>
                        <th>修订内容摘要</th>
                        <th>修订部门</th>
                        <th>修订人</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(record, index) in revisionRecords" :key="index">
                        <td><input type="text" v-model="record.version"></td>
                        <td>
                            <input type="text" v-model="record.effectiveDate.year" style="width: 40px;">年
                            <input type="text" v-model="record.effectiveDate.month" style="width: 40px;">月
                            <input type="text" v-model="record.effectiveDate.day" style="width: 40px;">日
                        </td>
                        <td><input type="text" v-model="record.summary"></td>
                        <td><input type="text" v-model="record.department"></td>
                        <td><input type="text" v-model="record.revisor"></td>
                    </tr>
                </tbody>
            </table>
            <!-- 使用提示 -->
            <p :class="{ 'content': true, 'editing': isEditingContent }" style="font-weight: bold;font-size: 1.4em;"
                @dblclick="toggleEditContent">
                <span v-if="!isEditingContent">使用前请确认是否为最新版本！</span>
                <input v-else v-model="editingContent" @blur="saveEditedContent" />
            </p>
            <div class="section">
                <h2 class="section-title">1. 目的</h2>
                <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                    <span v-if="!isEditingContent">为保障公司良好的工作秩序，提高员工的工作效率，树立良好的工作作风，特制订本管理办法。</span>
                    <input v-else v-model="editingContent" @blur="saveEditedContent" />
                </p>
            </div>
            <div class="section">
                <h2 class="section-title">2. 范围</h2>
                <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                    <span v-if="!isEditingContent">本管理办法适用于深圳市艾美思普科技有限公司所有人员。</span>
                    <input v-else v-model="editingContent" @blur="saveEditedContent" />
                </p>
            </div>
            <div class="section">
                <h2 class="section-title">3. 职责</h2>
                <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                    <span v-if="!isEditingContent">3.1 企业管理部：负责培训、解释、说明、监督实施与执行本管理办法的具体作业。</span>
                    <input v-else v-model="editingContent" @blur="saveEditedContent" />
                </p>
                <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                    <span v-if="!isEditingContent">3.2 其他各部门：负责对本部门进行培训、监督与配合执行。</span>
                    <input v-else v-model="editingContent" @blur="saveEditedContent" />
                </p>
            </div>
            <div class="section">
                <h2 class="section-title">4. 定义</h2>
                <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                    <span v-if="!isEditingContent">（无）</span>
                    <input v-else v-model="editingContent" @blur="saveEditedContent" />
                </p>
            </div>
            <div class="section">
                <h2 class="section-title">5. 内容</h2>
                <div class="subsection">
                    <h3 class="subsection-title">5.1 工作时间</h3>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">5.1.1 正常工作时间：公司实行每周五天工作制，每周工作40小时；</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">5.1.2
                            基本出勤时间：详见附件二《公司各部门基本出勤时间安排表》，如因生产等原因临时安排的不同的出勤时间，具体以各事业部书面批准的通知为准，并报事业部人资、系统运营组备案；</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">5.1.3 加班时间由各事业部根据实际需要安排，具体按《员工加班管理规定》、《职员加班管理规定》实施；</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">5.1.4 如因节气变化作息时间有所变更，依公司通知执行。</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                </div>
                <div class="subsection">
                    <h3 class="subsection-title">5.2 考勤管理</h3>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">5.2.1
                            公司上下班实行刷卡制度。除总经理/副总经理及总经理核准免打卡人员外，其余员工应严格遵守本制度，严禁代刷卡。对于代刷卡员工，一经发现，双方开除处理；
                        </span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">5.2.2
                            职员工上、下班必须按序排队刷卡，刷卡有效打卡时间为上班时间的前30分钟内，下班时间的后30分钟内，其它时间刷卡视为无效刷卡；</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">5.2.3 所有人员不得于下班前在卡钟处等待刷卡，如有违者，给予警告处分一次；</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">5.2.4 所有人员上班不得迟到、早退，凡迟到、早退者依以下条款处理：</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <ul class="content-list">
                        <li :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                            <span v-if="!isEditingContent">5.2.4.1 职员及基层月薪人员迟到或早退1 -
                                20分钟内，每次处以50元罚款；超过20分钟（含20分钟）则按旷工处理（详见5.2.6.2）；</span>
                            <input v-else v-model="editingContent" @blur="saveEditedContent" />
                        </li>
                        <li :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                            <span v-if="!isEditingContent">5.2.4.2 员工正班迟到或早退1 -
                                20分钟内，考勤系统自动扣除正班30分钟，并每次处以50元罚款；超过20分钟（含20分钟），则按旷工处理（详见5.2.6.2）；</span>
                            <input v-else v-model="editingContent" @blur="saveEditedContent" />
                        </li>
                        <li :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                            <span v-if="!isEditingContent">5.2.4.3 员工加班迟到或早退1 -
                                20分钟内，考勤系统自动扣除加班30分钟，并每次处以50元罚款；如迟到早退超过20分钟（含20分钟），则视为加班旷工，按加班旷工处理（详见5.2.6.2）。</span>
                            <input v-else v-model="editingContent" @blur="saveEditedContent" />
                        </li>
                    </ul>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">5.2.5 凡属下列情况之一，则视为旷工。</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <ul class="content-list">
                        <li :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                            <span v-if="!isEditingContent">5.2.5.1 用不当手段，骗取、涂改、伪造休假证明；</span>
                            <input v-else v-model="editingContent" @blur="saveEditedContent" />
                        </li>
                        <li :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                            <span v-if="!isEditingContent">5.2.5.2 未请假或请假未批准，而私自不上班者；</span>
                            <input v-else v-model="editingContent" @blur="saveEditedContent" />
                        </li>
                        <li :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                            <span v-if="!isEditingContent">5.2.5.3 超过批准的假期又未及时报上级续假，以及未提供有关证明的，未及时续假部分视为旷工；</span>
                            <input v-else v-model="editingContent" @blur="saveEditedContent" />
                        </li>
                        <li :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                            <span v-if="!isEditingContent">5.2.5.4 不服从部门职位调整及分配，逾期不到岗的，视为旷工；</span>
                            <input v-else v-model="editingContent" @blur="saveEditedContent" />
                        </li>
                        <li :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                            <span v-if="!isEditingContent">5.2.5.5 迟到、早退、擅离职守超过20分钟（含20分钟），视为旷工；</span>
                            <input v-else v-model="editingContent" @blur="saveEditedContent" />
                        </li>
                    </ul>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">5.2.6 旷工责罚制度（包括所有职员、基层和员工）：</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <ul class="content-list">
                        <li :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                            <span v-if="!isEditingContent">5.2.6.1 凡有旷工行为者，不计发旷工时间段的工资；</span>
                            <input v-else v-model="editingContent" @blur="saveEditedContent" />
                        </li>
                        <li :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                            <span v-if="!isEditingContent">5.2.6.2
                                员工正班旷工＞20分钟者，考勤系统自动扣除相关班制时长为旷工时间。正班旷工≤4小时，并每次罚款100元；正班旷工＞4小时，并每次罚款150元；加班旷工，考勤系统自动扣除加班申请时间，并每次罚款100元；职员及基层正班旷工≤4小时，每次罚款100元；正班旷工＞4小时，并每次罚款150元；并扣除相应旷工时段工资。
                            </span>
                            <input v-else v-model="editingContent" @blur="saveEditedContent" />
                        </li>
                        <li :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                            <span v-if="!isEditingContent">5.2.6.3 全体职员工无正当理由而无故连续旷工三日（含三日）以上为自动离职，公司不支付任何费用与补偿；</span>
                            <input v-else v-model="editingContent" @blur="saveEditedContent" />
                        </li>
                        <li :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                            <span v-if="!isEditingContent">5.2.6.4 全体职员工当月旷工三天或年累计旷工达七天者，予以开除，不支付任何经济补偿金；</span>
                            <input v-else v-model="editingContent" @blur="saveEditedContent" />
                        </li>
                    </ul>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">5.2.7
                            公司所有人员均须规范打卡，凡在规定时间外的打卡均视为无效卡（即漏卡），此类情况每月不得超过3次（含3次），如超过3次，则每次罚款50元给予警示；
                        </span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">5.2.8 凡法定节假日加班或申请调班者上下班时须按规定作息时间打卡，若打卡记录不全，则视为当日缺勤。</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">5.2.9
                            凡因公外出，须在公出前一个小时填写《公出申请单》，逐级审批后，上交事业部前台文员，由事业部前台文员转交考勤文员签录；如遇特殊情况，则必须于公出后1天内补交《公出申请单》，如不及时上交则按缺勤处理。
                        </span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">5.2.10
                            考勤文员每日发布的《异常考勤确认表》，须按时逐级确认（员工确认——直接上级确认——部门主管经理确认），不得代签，不得编造签卡原因，一经发现当事人按旷工1天处理，直接管理人员记大过一次。</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">5.2.11 其它特殊情况：</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <ul class="content-list">
                        <li :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                            <span v-if="!isEditingContent">5.2.11.1
                                如考勤卡异常/考勤机异常，须于上班前到事业部保安处登记（办公楼职员向直接上级申报），值班保安记录签卡时间，并于第二日早晨将前一日签卡记录《刷卡异常登记表》报于事业部人资处，人资转交系统运营组考勤文员进行签卡处理；
                            </span>
                            <input v-else v-model="editingContent" @blur="saveEditedContent" />
                        </li>
                        <li :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                            <span v-if="!isEditingContent">5.2.11.2
                                新入职员工，在正式厂牌发放之前的考勤由班组每天上午十点前提供前一工作日考勤电子档于考勤文员签卡处理；</span>
                            <input v-else v-model="editingContent" @blur="saveEditedContent" />
                        </li>
                    </ul>
                </div>
                <div class="subsection">
                    <h3 class="subsection-title">5.3 休假管理</h3>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">5.3.1 员工休假分类：国家法定节假日、公休假、工伤假、事假、病假、婚假、丧假、年假等假期。</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">5.3.2
                            各类休假，必须以书面形式填写《请假单》逐级审批后，报人资复核后交考勤管理人员进行考勤处理，详见附件一《请假核决权限表》。</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">5.3.3
                            凡请假者，必须提前1天将签审好的《请假单》交到事业部人资处备案，备案后才能按请假状况离岗，否则按旷工处理。特殊情况则要求请假者在返厂工作后的第一个工作日内将审批后《请假单》补交到事业部人资，否则按旷工处理。
                        </span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">5.3.4
                            销假：结合《请假单》申请的时间，凡提前返厂上班或延假者应在1个工作日内到人资处进行销假，销假时必须在《请假单》上有直属上级的签名确认，口头销假无效。
                        </span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">5.3.5 休假超过规定期限，应依请假程序办理请假，否则按旷工处理。</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">5.3.6
                            不得借故请假而前往其他公司上班，违者按旷工论处，此情形连续三天，以自动离职处理，如给公司造成损失的，追究其经济责任和法律责任。</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">5.3.7 请假理由不充足或有妨碍工作时，直属上级有权不给假或缩短假期或调整假期。</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">5.3.8 不得先休假再补假，如有特殊情况，酌情处理。</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">5.3.9 关于休假管理未尽事宜请参阅《假期管理规定》，若有冲突的地方，则以《假期管理规定》为准。</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                </div>
            </div>
            <div class="section">
                <h2 class="section-title">6. 附件、相关文件及表单</h2>
                <div class="subsection">
                    <h3 class="subsection-title">6.1 相关附件</h3>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">6.1.1 《请假核决权限表》 附件一</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">6.1.2 《公司各部门基本出勤时间安排表》 附件二</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                </div>
                <div class="subsection">
                    <h3 class="subsection-title">6.2 相关文件</h3>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">6.2.1 《员工薪资管理办法》</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">6.2.2 《职员薪资管理办法》</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">6.2.3 《假期管理规定》</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">6.2.4 《员工加班管理规定》</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">6.2.5 《职员加班管理规定》</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">6.2.6 《年假管理规定》</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                </div>
                <div class="subsection">
                    <h3 class="subsection-title">6.3 相关表单</h3>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">6.3.1 《刷卡异常登记表》</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">6.3.2 《公出申请单》</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                    <p :class="{ 'content': true, 'editing': isEditingContent }" @dblclick="toggleEditContent">
                        <span v-if="!isEditingContent">6.3.3 《请假单》</span>
                        <input v-else v-model="editingContent" @blur="saveEditedContent" />
                    </p>
                </div>
            </div>
            <div class="section">
                <h2 class="section-title">附件一：请假核决权限表</h2>
                <table class="table">
                    <thead>
                        <tr>
                            <th>职位</th>
                            <th>期限</th>
                            <th>请假人</th>
                            <th>组长</th>
                            <th>主管</th>
                            <th>经理</th>
                            <th>总监<br>事业部部长</th>
                            <th>总经理<br>副总经理</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td rowspan="4">普工请假<br>组长以下人员</td>
                            <td>1天</td>
                            <td>○</td>
                            <td>●</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>2 - 3天</td>
                            <td>○</td>
                            <td>◎</td>
                            <td>●</td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>4—7天</td>
                            <td>○</td>
                            <td>◎</td>
                            <td>⊙</td>
                            <td>●</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>8天以上</td>
                            <td>○</td>
                            <td>◎</td>
                            <td>◎</td>
                            <td>⊙</td>
                            <td>●</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td rowspan="2">组长级请假</td>
                            <td>1 - 2天</td>
                            <td>○</td>
                            <td></td>
                            <td>◎</td>
                            <td>●</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>3天以上</td>
                            <td>○</td>
                            <td></td>
                            <td>◎</td>
                            <td>⊙</td>
                            <td>●</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td rowspan="2">职员请假<br>E级职员</td>
                            <td>1天</td>
                            <td>○</td>
                            <td></td>
                            <td>◎</td>
                            <td>●</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>2天以上</td>
                            <td>○</td>
                            <td></td>
                            <td>◎</td>
                            <td>⊙</td>
                            <td>●</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td rowspan="2">职员请假<br>D级职员</td>
                            <td>1 - 2天</td>
                            <td>○</td>
                            <td></td>
                            <td></td>
                            <td>⊙</td>
                            <td>●</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>3天以上</td>
                            <td>○</td>
                            <td></td>
                            <td></td>
                            <td>◎</td>
                            <td>⊙</td>
                            <td>●</td>
                        </tr>
                        <tr>
                            <td rowspan="2">职员请假<br>C级职员</td>
                            <td>1天</td>
                            <td>○</td>
                            <td></td>
                            <td></td>
                            <td>⊙</td>
                            <td>●</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>2天以上</td>
                            <td>○</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>⊙</td>
                            <td>●</td>
                        </tr>
                        <tr>
                            <td rowspan="2">职员请假<br>B级职员</td>
                            <td>一日以内</td>
                            <td>○</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>●</td>
                        </tr>
                        <tr>
                            <td>一天</td>
                            <td>○</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>●</td>
                        </tr>
                        <tr>
                            <td>
                                说明
                            </td>
                            <td colspan="7">
                                ○—请假人申请 ◎—审核 ⊙—复核 ●—批准
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div style="line-height: 30px;">
                <h2 class="section-title">附件二：公司各部门基本出勤时间安排表</h2>
                <div @dblclick="editAttendance = true">
                    <p v-if="!editAttendance" style="text-indent: 2em;text-align: left;">
                        为确保公司职员工上下班井然有序，满足职员工下班就餐需求，促进食堂管理合理化、规范化，公司实行错峰上、下班管理，以更好的确保食堂就餐与员工休息不受到影响。对此，公司特对各事业部基本出勤时间进行如下安排：
                    </p>
                    <textarea v-else v-model="attendanceDescription" @blur="editAttendance = false"
                        style="width: 100%; height: 100px;"></textarea>
                </div>
                <ol>
                    <li v-for="(item, index) in attendanceTimes" :key="index"
                        @dblclick="editAttendanceTimes.splice(index, 1, true)">
                        <p v-if="!editAttendanceTimes[index]">
                            {{ item.department }}：{{ item.time }};
                        </p>
                        <div v-else style="display: flex;">
                            <input type="text" v-model="item.department"
                                @blur="editAttendanceTimes.splice(index, 1, false)" />
                            <input type="text" v-model="item.time"
                                @blur="editAttendanceTimes.splice(index, 1, false)" />
                        </div>
                    </li>
                </ol>
                <p @dblclick="editNote = true">
                    <span v-if="!editNote">注：具体夏季与秋季出勤作息时间调整或更改以企业管理部发放的通知为准！</span>
                    <textarea v-else v-model="note" @blur="editNote = false"
                        style="width: 100%; height: 50px;"></textarea>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'AttendanceManagement',
    data() {
        return {
            meta: {
                fileNumber: 'AM-A-JY-02',
                version: 'C/0',
                department: '企业管理部',
                effectiveDate: '2015-01-01'
            },
            approvalPerson: '',//批准
            reviewer: '',//审核
            compilationPerson: '',//编制
            approvalDate: { year: '', month: '', day: '' },
            reviewDate: { year: '', month: '', day: '' },
            compilationDate: { year: '', month: '', day: '' },
            distributionGroups: [
                [
                    { value: '01', label: '01:总 经 理室' },
                    { value: '02', label: '02:管理者代表' },
                    { value: '03', label: '03:企业管理部' },
                    { value: '04', label: '04:财务管理部' }
                ],
                [
                    { value: '10', label: '10:手机厂务部' },
                    { value: '16', label: '16:总装生产部' },
                    { value: '25', label: '25:品质部' },
                    { value: '30', label: '30:光电厂务部' }
                ],
                [
                    { value: '11', label: '11:手机业务部' },
                    { value: '20', label: '20:厂务部' },
                    { value: '26', label: '26: S M T' },
                    { value: '31', label: '31:光电生产部' }
                ],
                [
                    { value: '12', label: '12:手机物控部' },
                    { value: '21', label: '21:业务部' },
                    { value: '27', label: '27:二车间' },
                    { value: '32', label: '32:光电品质部' }
                ],
                [
                    { value: '13', label: '13:板卡生产部' },
                    { value: '22', label: '22:研发部' },
                    { value: '28', label: '28:三车间' },
                    { value: '33', label: '33:光电业务部' }
                ],
                [
                    { value: '14', label: '14:手机品质部' },
                    { value: '23', label: '23:物控部' },
                    { value: '29', label: '29:采购部' },
                    { value: '34', label: '34:光电物控部' }
                ],
                [
                    { value: '15', label: '15:手机工程部' },
                    { value: '24', label: '24:工程部' }
                ]
            ],
            selectedDepartments: {},
            revisionRecords: [
                {
                    version: '',
                    effectiveDate: { year: '', month: '', day: '' },
                    summary: '',
                    department: '',
                    revisor: ''
                }
            ],
            editMeta: false,
            editApproval: false,
            editReview: false,
            editCompilation: false,
            isEditingDepartment: false,
            editAttendance: false,
            attendanceDescription: '为确保公司职员工上下班井然有序，满足职员工下班就餐需求，促进食堂管理合理化、规范化，公司实行错峰上、下班管理，以更好的确保食堂就餐与员工休息不受到影响。对此，公司特对各事业部基本出勤时间进行如下安排：',
            attendanceTimes: [
                { department: '1、手机事业部', time: '8：00 -- 11：50，13：30 -- 17：40' },
                { department: '2、光电事业部', time: '8：00 -- 11：45，13：30 -- 17：45' },
                { department: '3、企业管理部', time: '8：30 -- 12：00，13：30 -- 18：00' },
                { department: '4、财务管理部', time: '8：30 -- 12：00，13：30 -- 18：00' }
            ],
            editAttendanceTimes: [false, false, false, false],
            editNote: false,
            note: '注：具体夏季与秋季出勤作息时间调整或更改以企业管理部发放的通知为准！',


            isEditingContent: false,
            editingContent: '',
        };
    },
    methods: {
        addRevisionRecord() {
            this.revisionRecords.push({
                version: '',
                effectiveDate: { year: '', month: '', day: '' },
                summary: '',
                department: '',
                revisor: ''
            });
        },
        saveRecord() {
            console.log(this.meta);
        },
        printForm() {
            window.print()
        },// 新增方法用于切换编辑状态
        toggleEditContent(event) {
            this.isEditingContent = !this.isEditingContent;
            if (this.isEditingContent) {
                this.editingContent = event.target.textContent;
            }
        },
        // 新增方法用于保存编辑后的内容
        saveEditedContent(event) {
            event.target.textContent = this.editingContent;
            this.isEditingContent = false;
        }
    }
}
</script>
<style lang="scss" scoped>
/* @import "./qjhejueqxb.css"; */
.attendance-management {
    line-height: 1.5;
    font-family: '宋体', sans-serif;
    /* 设置字体 */
    padding: 20px;
    /* 页面内边距 */
}

.header {
    width: 1200px;
    margin: 0 auto;
}

.header-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #409EFF;

    i {
        // font-size: 20px;
        color: #409EFF;
    }

    a.back-btn.router-link-active {
        color: #409EFF;
    }
}

.title {
    text-align: center;
    /* 标题居中 */
    // font-size: 24px;
    /* 标题字体大小 */
}

.meta {
    margin: 0 auto;
    width: 170px;
    text-align: left;
    /* 元信息居中 */
    margin-bottom: 5px;
    /* 元信息下方边距 */
    color: #000;
    /* 元信息字体颜色 */
}

.meta p {
    margin: 5px 0;
    /* 元信息段落内边距 */
}

/* 批准、审核、编制部分样式 */
.attendance-management div div {
    /* display: flex; */
    /* flex-direction: column; */
    /* 垂直排列 */
    align-items: center;
    /* 水平居中 */
}

.attendance-management div div label {
    margin-bottom: 5px;
    /* 标签下方边距 */
}

.attendance-management div div span {
    display: flex;
    /* 水平排列输入框 */
}

.attendance-management div div span input {
    margin-right: 5px;
    /* 输入框之间的间距 */
}

input {
    border: none;
    /* 去掉输入框边框 */
    background-color: transparent;
    /* 去掉输入框背景色 */
}

/* 分发部门编号部分样式 */
.distribution-groups {
    margin-bottom: 20px;
    /* 下方边距 */
}

.distribution-groups label {
    margin-bottom: 5px;
    /* 标签下方边距 */
    display: block;
    /* 单独占一行 */
}

.distribution-groups div {
    margin-bottom: 10px;
    /* 每个分组下方边距 */
}

/* 修订记录表格样式 */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    /* 表格下方边距 */
}

table th,
table td {
    border: 1px solid #ccc;
    /* 边框颜色和样式 */
    padding: 8px;
    /* 内边距 */
    text-align: center;
    /* 文本左对齐 */
}

table caption {
    margin-bottom: 10px;
    /* 标题下方边距 */
    font-size: 18px;
    /* 标题字体大小 */
    font-weight: bold;
    /* 标题加粗 */
}

/* 章节样式 */
.section {
    /* margin-bottom: 10px; */
    /* 章节下方边距 */
}

.section-title {
    text-align: left;
    /* font-size: 20px; */
    /* 章节标题字体大小 */
    color: #007bff;
    /* 章节标题字体颜色 */
    /* margin-bottom: 10px; */
    /* 章节标题下方边距 */
}

.content {
    margin-bottom: 10px;
    /* 内容段落下方边距 */
    text-align: left;
    text-indent: 2em;
}

/* 子章节样式 */
.subsection {
    text-indent: 2.2em;
    /* 子章节左缩进 */
}

.subsection-title {
    text-indent: 1em;
    /* font-size: 18px; */
    /* 子章节标题字体大小 */
    color: #333;
    /* 子章节标题字体颜色 */
    /* margin-bottom: 10px; */
    /* 子章节标题下方边距 */
    text-align: left;
}

ol li {
    list-style: none;
}

/* 列表样式 */
.content-list {
    padding-left: 20px;
    /* 列表左缩进 */
    text-align: left;

    li {
        // 取消列表符号
        list-style: none;
    }
}

/* 附件表格样式 */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    border: 1px solid #000;
    padding: 5px;
    text-align: center;
    /* 文本居中 */
}

@media print {
    .header {
        width: 900px;
        margin: 0px;
    }

    .header-left {
        display: none;
    }

    .add-department {
        display: none;
    }

    .add-record-btn {
        display: none;
    }

    table {
        margin: 10px 0px;
    }

    .info-table,
    .content-table,
    .approval-table {
        border: 1px solid #000;

        td,
        th {
            border: 1px solid #000;
        }
    }

    td,
    th {
        padding: 5px;
        border: 1px solid #000;
        white-space: nowrap;
    }
}
</style>
